<template>
	<view class="content">
		<view class="topButton">
			<icon class="iconfont iconlajixiang lefticon" type=""  @tap="reset()"/>
			<view class="button" @tap="send()">确定</view>
		</view>
		<view class="send">
			<view class="form">
				<view class="formItem f16 mgb16" @tap="getOpenlocation()">
					<view class="text">日期</view>
					<!-- <view class="f16"> 
						<input :value="formData.address" type="number" placeholder="服务地址" disabled/>
					</view> -->
					<icon class="iconfont iconweizhi1 hasmap" type=""/>
				</view>
				<formItem 
					ref="contacts"
					:lable="'保号'" 
					:placeholder="'填写保修卡号'" 
					:type="'text'" 
					:value="formData.contacts"
					:objkey="'contacts'"
					:change="onchange">
				</formItem>
				<formItem
					ref="phone"
					:lable="'电话'" 
					:placeholder="'客户手机号码'" 
					:type="'number'" 
					:value="formData.phone"
					:objkey="'phone'"
					:change="onchange">
				</formItem>
				<view class="formItem f16 " @tap="getOpenlocation()">
					<view class="text">地址</view>
					<view class="f16">
						<input :value="formData.address" type="number" placeholder="服务地址" disabled/>
					</view>
					<icon class="iconfont iconweizhi1 hasmap" type=""/>
				</view>
				<formItem
					ref="detail"
					:lable="'详细地址'" 
					:placeholder="'填写详细地址'" 
					:type="'number'" 
					:value="formData.detail"
					:objkey="'detail'"
					:change="onchange">
				</formItem>
			</view>
		</view>
	</view>
</template>


<script>
	 import formItem from '@/components/formItem/formItem';
	export default {
		components:{
			formItem
		},
		data() {
			return {
				isfocus:true,
				option:'',
				formData:{
					contacts:"",
					phone:"",
					address:"",
					detail:""
				},
				alreadyFormData:{
					cost:"",
					contacts:"",
					phone:"",
					address:"",
					detail:""
				},
				ruler:[
					{}
				],
				passAddress:"",
				longitude:"",
				latitude:"",
				addsdisplay:""
			}
		},
		onLoad(option) {
			console.log(option)
			option.title =1
			if(option.title==1){
				uni.setNavigationBarTitle({
				    title: '发送位置'
				})
			}else{
				uni.setNavigationBarTitle({
				    title: '已发送'
				})
			}
			this.option=option
		},
		methods: {
			finish(){
				uni.showModal({
				    title: '确定服务完成？',
				    duration: 2000,
					confirmText:'完成',
					confirmColor:'#03CBCB',
					success: function (res) {
					        if (res.confirm) {
					            console.log('用户点击确定');
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
				});
			},
			send(){
				uni.showModal({
				    title: '位置发送成功',
				    duration: 2000,
					confirmText:'确定',
					showCancel:false,
					confirmColor:'#03CBCB',
					success: function (res) {
					        if (res.confirm) {
					            console.log('用户点击确定');
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
				});
			},
			onchange(value,key){
				console.log(value,key)
			},
			getOpenlocation(){
				let that = this
				 wx.chooseLocation({
					success: res => {
					  that.getValueMap(res)
					},
					fail: res => {
					  console.log('打开地图选择位置取消', res)
					}
				  })
			},
			getValueMap(res){
				this.passAddress= res.address + res.name,
				this.longitude= res.longitude,
				this.latitude= res.latitude,
				this.addsdisplay=false
				console.log('res',res)
				this.formData.address = res.name
			},
			reset(){
				console.log('重置')
				for(let item in this.formData){
					this.$refs[item] ?this.$refs[item].reset():"";
					this.formData[item]=""
				}
			}
		}
	}
</script>

<style lang="less">
	@import '@/common/common.less';
	.content{
		display: flex;
		flex-direction: column;
		height: 100%;
		.topButton{
			height: 104rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			margin-bottom: 17rpx;
			.lefticon{
				margin-left: 40rpx;
				color: @primary-color;
				font-size: 18px;
				position: absolute;
				left: 0rpx;
			}
			.button{
				width: 112rpx;
				height: 60rpx;
				background-color: @primary-color;
				text-align: center;
				line-height: 60rpx;
				margin-right: 33rpx;
				border-radius: 10rpx;
				color: #FFFFFF;
			}
		}
		.already,.send{
			.cost{
				background-color: #FFFFFF;
				margin-bottom: 16rpx;
			}
			.form{
				background-color: #FFFFFF;
			}
			.formItem{
				border-bottom: 1rpx solid #e1e1e1;
				display: flex;
				flex-direction: row;
				padding-left: 39rpx;
				height: 101rpx;
				align-items: center;
				position: relative;
				.lefticon{
					margin-right: 28rpx;
					color: @primary-color;
				}
				.text{
					color: #555555;
					margin-right: 60rpx;
					width: 144rpx;
				}
				.hasmap{
					position: absolute;
					right: 35rpx;
					color: @primary-color;
				}
			}
			.focus{
				border-bottom: 1rpx solid @primary-color;
			}
			.mgb16{
				//margin-bottom: 16rpx;
				border-bottom: 16rpx solid #f2f2f2;
			}
		}
		
		
		
		.tips{
			width: 80%;
			margin: 20% auto 0 auto;
			text-align: center;
			.s{
				color: @primary-color;
			}
		}
	}
	
</style>
